calendar 日期选择

更新时间：2023-06-20

iov-calendar 日期选择组件

日期选择组件

一、属性说明

属性名	类型	默认值	必填	说明
class-name	String	无	否	自定义class
defaultDate	String	无	否	选择值的类型，如果是区间选择的话为Array[String]
rangePrompt	String	无	否	区间选择是，超过设置的最大区间值的toast提示
maxRange	Number	无	否	当日期为区间时，最大选择数，超出将会toast提示
title	String	日期选择	否	标题
allowSameDay	Boolean	无	否	当日期为区间时，是否允许选择同一天
type	String	single	否	日期类型range,multiple,single
minDate	null	Date.now()	否	最小日期
maxDate	null	new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate()).getTime()	否	最大日期
startText	String	无	否	当日期为区间时，开始日期下的文字
endText	String	无	否	当日期为区间时，结束日期下的文字
bindunselect	EventHandler	无	否	当日期类型为multiple时，取消选择的回调
bindselect	EventHandler	无	否	选择日期回调

二、示例：

json:

{
    "navigationBarTitleText": "智能小程序官方组件",
    "usingComponents": {
        "iov-calendar": "iov-ui/lib/calendar"
    }
}

swan:

<view class="test">
    <iov-calendar
        class="calendar"
        range="{{range}}"
        value="{{value}}"
        minDate="2020-11-15"
        maxDate="2020-12-31"
        defaultDate="2020-11-28"
        type="single"
        bindselect="select"
    ></iov-calendar>
    <iov-calendar
        maxRange="{{7}}"
        rangePrompt="超过最大天数"
        class="calendar"
        defaultDate="{{['2021-01-05', '2021-01-06']}}"
        minDate="2020-12-21"
        maxDate="2021-12-31"
        startText="入住"
        endText="离店"
        type="range"
        bindselect="rangeChange"
    ></iov-calendar>
</view>

js:

Page({
    data: {
    },
    select(e) {
        const date = e.detail;
        const str = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate());
        console.log(str);
    },
    rangeChange(e) {
        console.log(e);
    }
})

button 按钮 checkbox 多项选择